<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
<style>
.buy-box{margin-top:5px;}
.buy-box-span {margin-top:7px;margin-right:4px;color:#8f8f94;}
.mui-card-header {background-color:#ffffff !important;}
.fix-top {margin-top:5px;}
.mui-modal .mui-content {height: 100% !important;background-color: #efeff4;border:none;}
.notice {height:100%;overflow-y:auto;padding:5px 10px 40px 10px !important;background-color:#ffffff;}

.mui-badge { border-radius: 5px;border:1px solid #8f8f94;background-color:#ffffff;color:#8f8f94;padding: 2px 2px;}
.badge-way{ position:absolute ; top:72px; left:20px; font-size:8px !important;padding:1px 4px;border-color:#00ADA9;color:#00ADA9;}

.mui-input-row .mui-btn {
    line-height: 1.1;
    float: left;
    width: 25%;
    margin-left: 9px;
    padding: 6px 5px;
}
.header-color {
     background-color: #efefef !important; 
}
.mui-card-media {
    padding: 0px;
}
.mui-card-header.mui-card-media .mui-media-body {
    font-size: 15px;
    margin-left: 5px;
  
}
.con_clear{
	position:absolute;
	top:10px;
	left:100px;
	color: #00ADA9;
	font-size: 15px !important;
}
</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a onclick="history.go(-1);" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">填写订单</h1>
	</header>
	<div class="mui-content">
		<form id="orderForm" action="${ctxWx}/pu/realsche/booking" method="post">
			<input type="hidden" name="realscheid" value="${realsche.realscheid }" />
			<input type="hidden" name="departdateStr" value="${query.departdateStr }">
			<input type="hidden" name="realboardid" value="${query.realboardid }">
			<input type="hidden" name="realoffid" value="${query.realoffid }">
			<input type="hidden" name="ordertype" value="${query.ordertype }">
			<input type="hidden" name="boardaddrfc" value="${boardaddrfc }">
			<input type="hidden" name="offaddrfc" value="${offaddrfc }">
			<div class="mui-card-header pos-relative" style="height:90px;border:none;">
				<span style="position:absolute;top:8px;left:20px;">
					<fmt:formatDate value="${realsche.realboardtime }" pattern="HH:mm"/>
				</span>
				<c:if test="${fn:contains(realsche.schename, '豪华房车')}">
					<span style="position:absolute;top:5px;left:65px;">
						<span class="mui-badge" style="font-size:8px !important;padding:1px 4px 1px 4px;margin-left:5px;border-color:#f0ad4e;color:#f0ad4e;">豪华房车</span>
					</span>
				</c:if>
				<span style="position:absolute;top:30px;left:20px;"><span style="margin-right:2px;color:#f0ad4e;">•</span>${realsche.boardaddr}</span>
				<span style="position:absolute;top:52px;left:20px;"><span style="margin-right:2px;color:#38B895;">•</span>${realsche.offaddr}</span>
				<c:if test="${realsche.schetype == 2 }">
					<span class="mui-badge badge-way">往返票</span>
					<span style="position:absolute;top:70px;left:75px;color: #8f8f94;font-size:8px"> 
					${realsche.diffdays==0?'当日':'' }
					${realsche.diffdays==1?'次日':'' }
					${realsche.diffdays==2?'后日':'' }
					${realsche.diffdays==3?'第四日':'' }
					${realsche.gathertime }从${realsche.offaddr}返回
					</span> 
				</c:if>
			</div>
			<div class="mui-input-group fix-top">
				<div class="mui-input-row pos-relative">
					<label class="control-label">总额</label>
					<span style="position:absolute;top:10px;right:10px;color:#f0ad4e;font-size:18px !important;"><i class="icon-yen"></i><span id="totalPrice2">${fn:substring(realsche.retailprice, 0, fn:length(realsche.retailprice)-3)}</span></span>
				</div>
				<div class="mui-input-row">
					<label class="control-label">购买张数</label>
					<div class="mui-numbox" data-numbox-min='0' data-numbox-max='${realsche.leftSeats }'>
						<!-- <button class="mui-btn mui-btn-numbox-minus" type="button">-</button> -->
						<input id="purchasenum" value="1" name="purchasenum" class="mui-input-numbox" type="text"  onchange="editPassenger()"/>
						<!-- <button class="mui-btn mui-btn-numbox-plus" type="button">+</button> -->
					</div>
				</div>
				<div class="mui-input-row">
					<label class="control-label" for="contacts">联系人</label>
					<input type="text" id="contacts" name="contacts" placeholder="输入联系人" value="${sessionScope.pubuserPermission.mobile != sessionScope.pubuserPermission.name?sessionScope.pubuserPermission.name:'' }"/>
				</div>
				<div class="mui-input-row">
					<label class="control-label" for="payertel">联系电话</label>
					<input type="text" id="payertel" name="payertel" placeholder="输入电话" value="${sessionScope.pubuserPermission.mobile }"/>
				</div>
				<div class="mui-card" id="1">
					<div class="mui-card-header mui-card-media header-color">
						<div class="mui-media-body">
							<label class="control-label">第<span>1</span>位乘客</label>
							<span class="con_clear" onclick="clearPassenger(this);">清空</span>
						</div>
					</div>
					<div class="mui-card-content" >
						<div class="mui-input-group fix-top">
							<div class="mui-input-row pos-relative">
								<label class="control-label">姓名:</label>
								<input type="text"  name="passenger"/>
							</div>
							<div class="mui-input-row" >
								<label class="control-label">身份证号:</label>
								<input type="text"  name="certino" maxlength="18" />
							</div>
						</div>
					</div>
				</div>
				<div class="mui-input-row" >
					<button type="button" class="mui-btn mui-btn-warning mui-icon mui-icon-plus" onclick="addPassenger();">添加乘客</button>
				</div>
			</div>
			<ul class="mui-table-view mui-table-view-chevron fix-top">
				<li class="mui-table-view-cell">
					<a href="#user_notice_modal" class="mui-navigate-right">预定须知</a>
				</li>
			</ul>
			<div class="mui-content-padded">
				<button type="button" id="totalPrice" class="mui-btn mui-btn-primary mui-btn-block" onclick="check();">去支付￥${realsche.retailprice}</button>
			</div>
			<div class="fix-bottom2"></div>
		</form>
	</div>
	<div id="user_notice_modal" class="mui-modal">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-close mui-pull-right" href="#user_notice_modal"></a>
			<h1 class="mui-title">预定须知</h1>
		</header>
		<div class="mui-content">
			<div class="notice">
				<%@ include file="/WEB-INF/views/include/modules/realscheNotice.jsp"%>
			</div>
		</div>
	</div>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script>
		$(function(){
			$('input').change(countTotalPrice);
		});
		// 计算总价格
		function countTotalPrice(){
			var totalPrice = 0;
			var purchasenum = $('#purchasenum').val();
			var leftSeats = ${realsche.leftSeats };//剩余票数
			if(!isNaN(purchasenum) && purchasenum > 0&&purchasenum<=leftSeats){
				totalPrice+=purchasenum*${realsche.retailprice};
			}
			$('#totalPrice').text("去支付￥"+totalPrice.toFixed(2)); 
			$('#totalPrice2').text(totalPrice.toFixed(2));
		}
		var leftSeats = ${realsche.leftSeats};
		function check(){
			var msg = '';
			var r = /^[1-9]\d*|0$/;
			var purchasenum = $('#purchasenum').val();
			if(!r.test(purchasenum)){
				msg = '购票数不合法';
			} else if(purchasenum<=0){
				msg = '购票数不能为空';
			} else if(parseInt(purchasenum)>leftSeats){
				msg = '购票数超过剩余票数';
			}
			var r = /^1[3|4|5|7|8]\d{9}$/;
			var payertel = $('#payertel').val();
			var contacts = $('#contacts').val();
			if(contacts.trim() == ''){
				msg = '联系人不能为空';
			} else if(payertel.trim() == ''){
				msg = '手机号不能为空';
			} else if(!r.test(payertel)){
				msg = '手机号不正确';
			} 
			if(msg != ''){
				mui.alert(msg, '提示');
			} else {
				$('#orderForm').submit();
			}
		}
		//动态添加乘客
		function addPassenger(){
			var numcount = $(".mui-card").size();//获取当前乘客数量
			var num = Number(numcount)+1; //当前 乘客数量+1
			data = {idx: num};
			$("#"+numcount).after(template('con_passenger_template', data));
			$("input[name=purchasenum]").val(num);//修改购买张数
			countTotalPrice();
			$(".con_clear").html("删除");
		}
		
		//动态减少乘客
		function clearPassenger(obj){
			if($(obj).html()=="清空"){//乘客为1时是清空（清空文本框内容）
				$("input[name=passenger]").val("");
				$("input[name=certino]").val("");
			}
			 var numcount = $(".mui-card").size();//获取当前乘客数量
			 if(numcount==1){//如果乘客数量为1，显示清空且购票张数为1
					$(".con_clear").html("清空");
					$("input[name=purchasenum]").val(1);
					countTotalPrice();
			 }else{
					$(obj).parent().parent().parent().remove();
					if($(".mui-card").size()==1){
						$(".con_clear").html("清空");
					}
					var num = Number(numcount)-1; //当前 乘客数量-1
					$("input[name=purchasenum]").val(num);//修改购买张数	
					countTotalPrice();
					$('.mui-card').each(function(i, e){
						  $(e).attr("id",i+1);
						  $(e).children().children().children().first().children().html(i+1);//修改第*位乘客
					});
			} 
		}
		
		function editPassenger(){
			var purchasenum = $("input[name=purchasenum]").val();
			var leftSeats = ${realsche.leftSeats };//剩余票数
			if (purchasenum >leftSeats ){
				mui.alert('购票数超过剩余票数', '提示');
				return;
			}else if(isNaN(purchasenum)){
				mui.alert('购票数不合法', '提示');
				return;
			}else if(purchasenum<=0){
				mui.alert('购票数不能为空', '提示');
				return;
			}
			clearPassengers();
			for(var i=1; i<purchasenum; i++){
				addPassenger();
			} 
			if(purchasenum==1){//如果购票张数为1，显示清空
				$(".con_clear").html("清空");
		 	}
		}
		
		function clearPassengers(){
			var numcount = $(".mui-card").size();
			for(var i=1; i<numcount; i++){
				$(".mui-card").get(1).remove();
			}
		}
	</script>
	<script src="${ctxStatic}/common/template-native.js" type="text/javascript"></script>
	<script id="con_passenger_template" type="text/html">
				<div class="mui-card" id="{{=idx}}">
					<div class="mui-card-header mui-card-media header-color">
						<div class="mui-media-body">
							<label class="control-label">第<span>{{=idx}}</span>位乘客</label>
							<span class="con_clear" onclick="clearPassenger(this);">清空</span>
						</div>
					</div>
					<div class="mui-card-content" >
						<div class="mui-input-group fix-top">
							<div class="mui-input-row pos-relative">
								<label class="control-label">姓名:</label>
								<input type="text"  name="passenger"/>
							</div>
							<div class="mui-input-row" >
								<label class="control-label">身份证号:</label>
								<input type="text"  name="certino" maxlength="18" />
							</div>
						</div>
					</div>
				</div>
	</script>
	<script>
		template.defaults.openTag = '{{';
		template.defaults.closeTag = '}}';
	</script>
</body>
</html>